<template>
  <div>
    <!-- 步骤条 -->
    <el-row>
      <el-col :span="4">
        <div class="grid-content"></div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content">
          <el-steps :active="active" finish-status="success">
            <el-step title="账号/邮箱"></el-step>
            <el-step title="验证码"></el-step>
          </el-steps>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content"></div>
      </el-col>
    </el-row>
    <!-- 输入框 -->
    <el-row>
      <el-col :span="8">
        <div class="grid-content"></div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            label-position="top"
          >
            <el-form-item label="新邮箱" prop="email">
              <el-input
                type="email"
                v-model="ruleForm.email"
                autocomplete="off"
                placeholder="请输入邮箱号"
              ></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="verify" class="checknum_size">
              <el-input
                type="text"
                v-model="ruleForm.verify"
                autocomplete="off"
                placeholder="请输入验证码"
              ></el-input>
            </el-form-item>
            <div class="button_position">
              <el-button
                type="primary"
                style="height:45px"
                v-bind:disabled="!this.canClick"
                @click="getVerify(),countdown()"
              >获取验证码</el-button>
            </div>
            <el-form-item>
              <div class="button_position2">
                <el-button type="primary" @click="submitForm('ruleForm'),checkVerify()">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "inputNewEmail",
  data() {
    let validateEmail = (rule, value, callback) => {
      let regEmail = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
      if (value === "") {
        callback(new Error("请输入邮箱"));
      } else if (!regEmail.test(this.ruleForm.email)) {
        // this.$refs.ruleForm.validateField("email");
        callback(new Error("请输入正确的格式"));
      } else {
        if (this.active++ > 2) this.active = 0;
        callback();
      }
    };

    let validateCheckNum = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        if (this.active++ > 2) this.active = 0;
        callback();
      }
    };

    return {
      canClick: true,
      content: "发送验证码",
      totalTime: 60,
      active: 0,
      ruleForm: {
        email: "",
        verify: ""
      },
      rules: {
        email: [{ validator: validateEmail, trigger: "blur" }],

        verify: [{ validator: validateCheckNum, trigger: "blur" }]
      }
    };
  },
  methods: {
    // next() {
    //   if (this.active++ > 4) this.active = 0;
    // },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          return this.$message.success("修改成功!");
          // alert("submit!");
        } else {
          return this.$message.error("修改失败!");
          // console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //给新邮箱发送验证码
    getVerify() {
      this.$post_form(this.$urlPath.user + "/account/verify/newEmail/send", {
        email: this.ruleForm.email
      }).then(resp => {
        if (resp.code == 200) {
          return this.$message.success("已发送!");
          // alert("已发送");
          //发送成功后按钮禁止点击一分钟
          countdown();
        } else
          this.$message({
            message: resp.message,
            type: "error"
          });
        // alert(resp.message);
      });
    },
    //验证验证码是否正确
    checkVerify() {
      // alert("提交");
      this.$post_form(this.$urlPath.user + "/account/verify/newEmail/check", {
        verify: this.ruleForm.verify
      }).then(resp => {
        // alert(resp.message);
        if (resp.code == 200) {
          return this.$message.success("修改成功");
        } else {
          return this.$message.error("修改失败");
        }
      });
    },
    //点击按钮后一分钟倒计时
    countdown() {
      this.canClick = false;
      this.content = this.totalTime + "s后重新发送";
      let clock = window.setInterval(() => {
        this.totalTime--;
        this.content = this.totalTime + "s后重新发送";
        if (this.totalTime < 0) {
          window.clearInterval(clock);
          this.content = "重新发送";
          this.totalTime = 60;
          this.canClick = true;
        }
      }, 1000);
    }
  }
};
</script>
<style lang="less">
@import "../assets/less/changeEmail.less";
</style>